<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - drag with other DOM</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
<!--<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>-->
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
<SCRIPT type="text/javascript">
  <!--
  var MoveTest = {
    errorMsg: "Error!...Please drag it to the correct category!",
    curTarget: null,
    curTmpTarget: null,
    noSel: function() {
      try {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
      } catch (e) {
      }
    },
    dragTree2Dom: function(treeId, treeNodes) {
      return !treeNodes[0].isParent;
    },
    prevTree: function(treeId, treeNodes, targetNode) {
      return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
    },
    nextTree: function(treeId, treeNodes, targetNode) {
      return !targetNode.isParent && targetNode.parentTId == treeNodes[0].parentTId;
    },
    innerTree: function(treeId, treeNodes, targetNode) {
      return targetNode != null && targetNode.isParent && targetNode.tId == treeNodes[0].parentTId;
    },
    dropTree2Dom: function(e, treeId, treeNodes, targetNode, moveType) {
      var domId = "dom_" + treeNodes[0].getParentNode().id;
      if (moveType == null && (domId == e.target.id || $(e.target).parents("#" + domId).length > 0)) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.removeNode(treeNodes[0]);

        var newDom = $("span[domId=" + treeNodes[0].id + "]");
        if (newDom.length > 0) {
          newDom.removeClass("domBtn_Disabled");
          newDom.addClass("domBtn");
        } else {
          $("#" + domId).append("<span class='domBtn' domId='" + treeNodes[0].id + "'>" + treeNodes[0].name + "</span>");
        }
        MoveTest.updateType();
      } else if ($(e.target).parents(".domBtnDiv").length > 0) {
        alert(MoveTest.errorMsg);
      }
    },
    dom2Tree: function(e, treeId, treeNode) {
      var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
      if (!target) return;
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"), parentNode;
      if (treeNode != null && treeNode.isParent && "dom_" + treeNode.id == target.parent().attr("id")) {
        parentNode = treeNode;
      } else if (treeNode != null && !treeNode.isParent && "dom_" + treeNode.getParentNode().id == target.parent().attr("id")) {
        parentNode = treeNode.getParentNode();
      }

      if (tmpTarget) tmpTarget.remove();
      if (!!parentNode) {
        var nodes = zTree.addNodes(parentNode, { id: target.attr("domId"), name: target.text() });
        zTree.selectNode(nodes[0]);
      } else {
        target.removeClass("domBtn_Disabled");
        target.addClass("domBtn");
        alert(MoveTest.errorMsg);
      }
      MoveTest.curTarget = null;
      MoveTest.curTmpTarget = null;
    },
    updateType: function() {
      var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
        nodes = zTree.getNodes();
      for (var i = 0, l = nodes.length; i < l; i++) {
        var num = nodes[i].children ? nodes[i].children.length : 0;
        nodes[i].name = nodes[i].name.replace(/ \(.*\)/gi, "") + " (" + num + ")";
        zTree.updateNode(nodes[i]);
      }
    },
    bindDom: function() {
      $(".domBtnDiv").bind("mousedown", MoveTest.bindMouseDown);
    },
    bindMouseDown: function(e) {
      var target = e.target;
      if (target != null && target.className == "domBtn") {
        var doc = $(document),
          target = $(target),
          docScrollTop = doc.scrollTop(),
          docScrollLeft = doc.scrollLeft();
        target.addClass("domBtn_Disabled");
        target.removeClass("domBtn");
        curDom = $("<span class='dom_tmp domBtn'>" + target.text() + "</span>");
        curDom.appendTo("body");

        curDom.css({
          "top": (e.clientY + docScrollTop + 3) + "px",
          "left": (e.clientX + docScrollLeft + 3) + "px"
        });
        MoveTest.curTarget = target;
        MoveTest.curTmpTarget = curDom;

        doc.bind("mousemove", MoveTest.bindMouseMove);
        doc.bind("mouseup", MoveTest.bindMouseUp);
        doc.bind("selectstart", MoveTest.docSelect);
      }
      if (e.preventDefault) {
        e.preventDefault();
      }
    },
    bindMouseMove: function(e) {
      MoveTest.noSel();
      var doc = $(document),
        docScrollTop = doc.scrollTop(),
        docScrollLeft = doc.scrollLeft(),
        tmpTarget = MoveTest.curTmpTarget;
      if (tmpTarget) {
        tmpTarget.css({
          "top": (e.clientY + docScrollTop + 3) + "px",
          "left": (e.clientX + docScrollLeft + 3) + "px"
        });
      }
      return false;
    },
    bindMouseUp: function(e) {
      var doc = $(document);
      doc.unbind("mousemove", MoveTest.bindMouseMove);
      doc.unbind("mouseup", MoveTest.bindMouseUp);
      doc.unbind("selectstart", MoveTest.docSelect);

      var target = MoveTest.curTarget, tmpTarget = MoveTest.curTmpTarget;
      if (tmpTarget) tmpTarget.remove();

      if ($(e.target).parents("#treeDemo").length == 0) {
        if (target) {
          target.removeClass("domBtn_Disabled");
          target.addClass("domBtn");
        }
        MoveTest.curTarget = null;
        MoveTest.curTmpTarget = null;
      }
    },
    bindSelect: function() {
      return false;
    }
  };

  var setting = {
    edit: {
      enable: true,
      showRemoveBtn: false,
      showRenameBtn: false,
      drag: {
        prev: MoveTest.prevTree,
        next: MoveTest.nextTree,
        inner: MoveTest.innerTree
      }
    },
    data: {
      keep: {
        parent: true,
        leaf: true
      },
      simpleData: {
        enable: true
      }
    },
    callback: {
      beforeDrag: MoveTest.dragTree2Dom,
      onDrop: MoveTest.dropTree2Dom,
      onMouseUp: MoveTest.dom2Tree
    },
    view: {
      selectedMulti: false
    }
  };

  var zNodes = [
    { id: 1, pId: 0, name: "PLANT", isParent: true, open: true },
    { id: 2, pId: 0, name: "ANIMAL", isParent: true, open: true },
    { id: 20, pId: 2, name: "Elephant" },
    { id: 29, pId: 2, name: "Shark" },
    { id: 10, pId: 1, name: "Cabbage" },
    { id: 19, pId: 1, name: "Tomato" }
  ];

  $(document).ready(function() {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    MoveTest.updateType();
    MoveTest.bindDom();
  });
  //-->
</SCRIPT>
<style type="text/css">
  .dom_line {
    border-bottom: 1px gray dotted;
    height: 1px;
    margin: 2px;
  }

  .domBtnDiv {
    background-color: powderblue;
    border: 1px gray dotted;
    display: block;
    padding: 2px;
  }

  .categoryDiv {
    display: inline-block;
    width: 335px
  }

  .domBtn {
    background-color: #FFE6B0;
    border: 1px gray solid;
    cursor: pointer;
    display: inline-block;
    margin: 2px 10px;
    padding: 2px;
  }

  .domBtn_Disabled {
    background-color: #DFDFDF;
    border: 1px gray solid;
    color: #999999;
    cursor: default;
    display: inline-block;
    margin: 2px 10px;
    padding: 2px;
  }

  .dom_tmp {
    font-size: 12px;
    position: absolute;
  }
</style>
</HEAD>

<BODY>
<h1>Drag With Other DOMs</h1>
<h6>[ File Path: super/dragWithOther.html ]</h6>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
  <div class="right">
    <ul class="info">
      <li class="title">
        <h2>Explanation of implementation method</h2>
        <ul class="list">
          <li>zTree v3.2 modified the event object in onDrag/onDrop, thus the nodes can be draged to other DOMs easily.</li>
          <li class="highlight_red">To drag other DOMS to zTree, you need to build the drag codes by yourself.</li>
          <li class="highlight_red">This is just a simple Demo. If you need more features, please build more complicated codes.</li>
        </ul>
      </li>
      <li class="title">
        <h2>Please drag and drop the following content to the tree node</h2>
        <div class="domBtnDiv">
          <div id="dom_1" class="categoryDiv">
            <span class="domBtn" domId="11">Tree</span><span class="domBtn" domId="12">Grass</span><span class="domBtn" domId="13">Flower</span></div>
          <div class="dom_line"></div>
          <div id="dom_2" class="categoryDiv">
            <span class="domBtn" domId="21">Tiger</span><span class="domBtn" domId="22">Bear</span><span class="domBtn" domId="23">Lion</span></div>
        </div>
        <span class="highlight_red">You can drag the nodes of level 2 to the above layer.</span>
      </li>
    </ul>
  </div>
</div>
</BODY>
</HTML>